<template>
    <div class="box">
        <iframe width="100%" height="100%" class="bg" src="bg.html"></iframe>
        <div class="login">
            <h2 style="color:white; text-align: center">流程管理系统</h2>
            <div class="item">
                <el-input type="text" prefix-icon="el-icon-user" v-model="username"/>
            </div>
            <div class="item">
                <el-input type="password" prefix-icon="el-icon-lock" v-model="password" @keyup.enter.native="login"/>
            </div>
            <div style="text-align: center; margin-top: 20px;">
                <el-button @click="login" type="primary">登录</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Login",
        data(){
            return {
                id: "",
                robbin:null,
                username: "",
                password: ""
            }
        },
        methods:{
            login(){
                $.get("/login/login", {username: this.username, password: this.password})
                    .then(e => {
                        if(e.success){
                            var token = e.data.token;
                            this.$cookies.set("bpm-token", token);
                            //fix me
                            localStorage.setItem("$user", JSON.stringify(e.data.user));
                            localStorage.setItem("bpm-token", token);
                            this.$router.push({
                                path: "/index"
                            })
                        } else {
                            this.$notify.error(e.errMessage);
                        }
                    })
                    .fail(e => {
                        this.$notify.error("服务器断开，请检查网络连接");
                    });
            }
        },
        mounted() {
            $.get("/login/checkLogin")
                .then(r => {
                    if(r.success){
                        if(r.data){
                            this.$router.push("/index")
                        }
                    }
                });
        },
        destroyed() {
            console.log("destroied")
        }
    }
</script>

<style scoped>
    .box{
        width: 100vw;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        position: relative;
        /*background: rgba(0,0,0,.9);*/
    }
    .bg{
        position: absolute;
        left: 0;
        top: 0;
        z-index: 1;
        width: 100vw;
        height: 100vh;
    }
    .login{
        width: 400px;
        background: rgba(0,0,0,.7);
        padding: 50px;
        padding-top: 10px;
        box-sizing: border-box;
        border-radius: 10px;
        position: relative;
        z-index: 2;
    }
    .item{
        margin-top: 15px;
        margin-bottom: 15px;
    }
</style>